<template>
  <view style="padding-bottom: 120rpx; position: relative;">
    <u-form label-position="top" id="form" :border-bottom="false">
      <u-form-item label="总监" :border-bottom="false" style="padding: 0;">
        <u-input
          :value="director && director.label"
          :border="showBorder"
          @click="showDirectorPicker = true"
          inputAlign="left"
          type="select"
          :selectOpen="showDirectorPicker"
        ></u-input>
      </u-form-item>
      <u-form-item label="销售经理" :border-bottom="false" style="padding: 0;">
        <u-input
          :value="salse && salse.label"
          :border="showBorder"
          @click="showSalsePicker = true"
          inputAlign="left"
          type="select"
          :selectOpen="showSalsePicker"
        ></u-input>
      </u-form-item>
      <u-form-item label="城市经理" :border-bottom="false" style="padding: 0;">
        <u-input
          :value="dealerTerminal && dealerTerminal.label"
          :border="showBorder"
          @click="showDealerTerminalPicker = true"
          inputAlign="left"
          type="select"
          :selectOpen="showDealerTerminalPicker"
        ></u-input>
      </u-form-item>
      <u-form-item label="团队负责人" :border-bottom="false" style="padding: 0;">
        <u-input
          :value="team && team.label"
          :border="showBorder"
          @click="showTeamPicker = true"
          inputAlign="left"
          type="select"
          :selectOpen="showTeamPicker"
        ></u-input>
      </u-form-item>

      <template v-if="showOtherLeader">
        <u-form-item label="城市高级市场经理" :border-bottom="false" style="padding: 0;">
          <u-input
            :value="seniorDealerTerminal && seniorDealerTerminal.label"
            :border="showBorder"
            @click="showSeniorDealerTerminalPicker = true"
            inputAlign="left"
            type="select"
            :selectOpen="showSeniorDealerTerminalPicker"
          ></u-input>
        </u-form-item>
        <u-form-item label="事业部总监" :border-bottom="false" style="padding: 0;">
          <u-input
            :value="dealerDivision && dealerDivision.label"
            :border="showBorder"
            @click="showDealerDivisionPicker = true"
            inputAlign="left"
            type="select"
            :selectOpen="showDealerDivisionPicker"
          ></u-input>
        </u-form-item>
        <u-form-item label="大区总监" :border-bottom="false" style="padding: 0;">
          <u-input
            :value="regionalDirector && regionalDirector.label"
            :border="showBorder"
            @click="showRegionalDirectorPicker = true"
            inputAlign="left"
            type="select"
            :selectOpen="showRegionalDirectorPicker"
          ></u-input>
        </u-form-item>
        <u-form-item label="售后服务经理" :border-bottom="false" style="padding: 0;">
          <u-input
            :value="salesService && salesService.label"
            :border="showBorder"
            @click="showSalesServicePicker = true"
            inputAlign="left"
            type="select"
            :selectOpen="showSalesServicePicker"
          ></u-input>
        </u-form-item>
      </template>
      <u-form-item label="审核状态" :border-bottom="false" v-if="showAuditStatus" style="padding: 0;">
        <u-input
          :value="auditStatus && auditStatus.label"
          :border="showBorder"
          @click="showAuditStatusPicker = true"
          inputAlign="left"
          type="select"
          :selectOpen="showAuditStatusPicker"
        ></u-input>
      </u-form-item>

      <u-form-item label="经销商或门店名称" style="padding: 0;" v-if="!splitDealerName">
        <u-input v-model="DealerName" placeholder="" inputAlign="left"></u-input>
      </u-form-item>

      <template v-if="splitDealerName">
        <u-form-item style="padding: 0;" label="一级经销商">
          <u-input v-model="First_DealerName" placeholder="一级经销商" inputAlign="left"></u-input>
        </u-form-item>
        <u-form-item style="padding: 0;" label="二级经销商">
          <u-input v-model="Double_DealerName" placeholder="二级经销商" inputAlign="left"></u-input>
        </u-form-item>
        <u-form-item style="padding: 0;" v-if="showDoorName" label="门店">
          <u-input v-model="DoorName" placeholder="门店" inputAlign="left"></u-input>
        </u-form-item>
      </template>

      <u-form-item style="padding: 0;" label="等级" :border-bottom="false" v-if="showLevel">
        <u-radio-group style="width: 100%;" v-model="Level">
          <view class="grid-3">
            <u-radio :label-size="26" :name="1">一级</u-radio>
            <u-radio :label-size="26" :name="2">二级</u-radio>
            <u-radio :label-size="26" :name="3">门店</u-radio>
          </view>
        </u-radio-group>
      </u-form-item>
      <u-form-item style="padding: 0;" label="申请类型" :border-bottom="false" v-if="showApplyType">
        <u-radio-group style="width: 100%;" v-model="ApplayType">
          <view class="grid-3">
            <u-radio :label-size="26" :name="1">新增</u-radio>
            <u-radio :label-size="26" :name="2">关停</u-radio>
            <u-radio :label-size="26" :name="3">并转</u-radio>
          </view>
        </u-radio-group>
      </u-form-item>

      <block v-if="isDesignList">
        <u-form-item style="padding: 0;" label="申请类型" :border-bottom="false">
          <u-radio-group style="width: 100%;" v-model="ApplayType">
            <view class="grid-3">
              <u-radio :label-size="26" :name="1">门头</u-radio>
              <u-radio :label-size="26" :name="2">专卖店</u-radio>
              <u-radio :label-size="26" :name="3">其他</u-radio>
            </view>
          </u-radio-group>
        </u-form-item>
        <u-form-item style="padding: 0;" label="是否上传设计稿" :border-bottom="false">
          <u-radio-group style="width: 100%;" v-model="IsDesignUp">
            <view class="grid-3">
              <u-radio :label-size="26" :name="1">已上传</u-radio>
              <u-radio :label-size="26" :name="2">未上传</u-radio>
            </view>
          </u-radio-group>
        </u-form-item>
      </block>

      <template v-if="isStoreCostsList || isDoorCostsList">
        <u-form-item style="padding: 0;" v-if="isStoreCostsList" label="是否精选专卖店" :border-bottom="false">
          <u-radio-group style="width: 100%;" v-model="IsExclusive">
            <view class="grid-3">
              <u-radio :label-size="26" :name="1">是</u-radio>
              <u-radio :label-size="26" :name="2">否</u-radio>
            </view>
          </u-radio-group>
        </u-form-item>

        <u-form-item style="padding: 0;" v-if="isDoorCostsList" label="是否精选门头" :border-bottom="false">
          <u-radio-group style="width: 100%;" v-model="IsGoodDoor">
            <view class="grid-3">
              <u-radio :label-size="26" :name="1">是</u-radio>
              <u-radio :label-size="26" :name="2">否</u-radio>
            </view>
          </u-radio-group>
        </u-form-item>

        <u-form-item style="padding: 0;" label="协议状态" :border-bottom="false">
          <u-radio-group style="width: 100%;" v-model="IsDesignUp">
            <view class="grid-3">
              <u-radio :label-size="26" :name="1">已上传</u-radio>
              <u-radio :label-size="26" :name="2">未上传</u-radio>
            </view>
          </u-radio-group>
        </u-form-item>
      </template>

      <u-form-item style="padding: 0;" label="是否传输金蝶" :border-bottom="false" v-if="showIsKeeding">
        <u-radio-group style="width: 100%;" v-model="IsKeeding">
          <view class="grid-3">
            <u-radio :label-size="26" :name="1">已传输</u-radio>
            <u-radio :label-size="26" :name="2">未传输</u-radio>
          </view>
        </u-radio-group>
      </u-form-item>

      <u-form-item style="padding: 0;" label="申请开始时间" :border-bottom="false">
        <u-input
          :value="startTime"
          @click="showStartTimePicker = true"
          type="select"
          :selectOpen="showStartTimePicker"
          :border="true"
        ></u-input>
      </u-form-item>
      <u-form-item style="padding: 0;" label="申请结束时间" :border-bottom="false">
        <u-input
          :value="endTime"
          @click="showEndTimePicker = true"
          type="select"
          :selectOpen="showEndTimePicker"
          :border="true"
        ></u-input>
      </u-form-item>

      <view class="btn-group-absolute u-flex u-row-between ">
        <u-button size="medium" @click="resetSearch">重置</u-button>
        <u-button type="warning" @click="onSearch" size="medium">搜索</u-button>
      </view>
    </u-form>

    <u-select
      @confirm="onPickerChange($event, 'director', 'DirectorList')"
      :default-value="[directorIndex]"
      v-model="showDirectorPicker"
      :list="metadata.DirectorList"
      label-name="Value"
      value-name="Key"
    ></u-select>
    <u-select
      @confirm="onPickerChange($event, 'salse', 'SalseList')"
      :default-value="[salseIndex]"
      v-model="showSalsePicker"
      :list="metadata.SalseList"
      label-name="Value"
      value-name="Key"
    ></u-select>
    <u-select
      @confirm="onPickerChange($event, 'dealerTerminal', 'DealerTerminalList')"
      :default-value="[dealerTerminalIndex]"
      v-model="showDealerTerminalPicker"
      :list="metadata.DealerTerminalList"
      label-name="Value"
      value-name="Key"
    ></u-select>
    <u-select
      @confirm="onPickerChange($event, 'team', 'TeamList')"
      :default-value="[teamIndex]"
      v-model="showTeamPicker"
      :list="metadata.TeamList"
      label-name="Value"
      value-name="Key"
    ></u-select>
    <u-select
      @confirm="onPickerChange($event, 'seniorDealerTerminal', 'SeniorDealerTerminalList')"
      :default-value="[seniorDealerTerminalIndex]"
      v-model="showSeniorDealerTerminalPicker"
      :list="metadata.SeniorDealerTerminalList"
      label-name="Value"
      value-name="Key"
    ></u-select>
    <u-select
      @confirm="onPickerChange($event, 'dealerDivision', 'DealerDivisionList')"
      :default-value="[dealerDivisionIndex]"
      v-model="showDealerDivisionPicker"
      :list="metadata.DealerDivisionList"
      label-name="Value"
      value-name="Key"
    ></u-select>
    <u-select
      @confirm="onPickerChange($event, 'regionalDirector', 'RegionalDirectorList')"
      :default-value="[regionalDirectorIndex]"
      v-model="showRegionalDirectorPicker"
      :list="metadata.RegionalDirectorList"
      label-name="Value"
      value-name="Key"
    ></u-select>
    <u-select
      @confirm="onPickerChange($event, 'salesService', 'SalesServiceList')"
      :default-value="[salesServiceIndex]"
      v-model="showSalesServicePicker"
      :list="metadata.SalesServiceList"
      label-name="Value"
      value-name="Key"
    ></u-select>

    <u-select
      @confirm="onPickerChange($event, 'auditStatus', 'AuditStateBaseList')"
      :default-value="[auditStatusIndex]"
      v-model="showAuditStatusPicker"
      :list="metadata.AuditStateBaseList ? metadata.AuditStateBaseList : []"
      label-name="Value"
      value-name="Key"
    ></u-select>

    <u-picker
      :default-time="startTimeDefault"
      @confirm="onStartTimeChange"
      v-model="showStartTimePicker"
      mode="time"
      :params="{ year: true, month: true, day: true }"
    ></u-picker>
    <u-picker
      :default-time="endTimeDefault"
      @confirm="onEndTimeChange"
      v-model="showEndTimePicker"
      mode="time"
      :params="{ year: true, month: true, day: true }"
    ></u-picker>
  </view>
</template>

<script>
export default {
  name: 'search-form',
  props: {
    splitDealerName: {
      type: Boolean,
      default: false
    },
    showDoorName: {
      type: Boolean,
      default: true
    },
    showLevel: {
      type: Boolean,
      default: true
    },
    showApplyType: {
      type: Boolean,
      default: true
    },
    showIsKeeding: {
      type: Boolean,
      default: false
    },
    showAuditStatus: {
      type: Boolean,
      default: true
    },
    showOtherLeader: {
      type: Boolean,
      default: false
    },
    isStoreCostsList: {
      type: Boolean,
      default: false
    },
    isDoorCostsList: {
      type: Boolean,
      default: false
    },
    isDesignList: {
      type: Boolean,
      default: false
    },
    metadata: {
      type: Object,
      default() {
        return {
          // 总监列表
          DirectorList: [],
          // 销售经理列表
          SalseList: [],
          // 城市经理列表
          DealerTerminalList: [],
          // 团队负责人列表
          TeamList: [],
          // 城市高级市场经理列表
          SeniorDealerTerminalList: [],
          // 事业部总监列表
          DealerDivisionList: [],
          // 区域总监列表
          RegionalDirectorList: [],
          // 售后服务经理列表
          SalesServiceList: [],
          AuditStateBaseList: []
        };
      }
    },
    value: {
      type: Object,
      default() {
        return {
          DirectorId: null,
          SalseId: null,
          DealerTerminalId: null,
          TeamId: null,
          SeniorDealerTerminalId: null,
          DealerDivisionId: null,
          SalesService: null,
          RegionalDirector: null,
          DealerName: '',
          StartTime: null,
          EndTime: null,
          Level: null,
          ApplayType: null,
          First_DealerName: '',
          Double_DealerName: '',
          DoorName: '',
          IsKeeding: null,
          AuditState: null,
          // 是否精选专卖店
          IsExclusive: 0,
          IsDesignUp: 0,
          IsGoodDoor: 0
        };
      }
    }
  },
  data() {
    return {
      showBorder: true,

      showDirectorPicker: false,
      directorIndex: -1,
      director: null,

      showSalsePicker: false,
      salseIndex: -1,
      salse: null,

      showDealerTerminalPicker: false,
      dealerTerminalIndex: -1,
      dealerTerminal: null,

      showTeamPicker: false,
      teamIndex: -1,
      team: null,

      showSeniorDealerTerminalPicker: false,
      seniorDealerTerminalIndex: -1,
      seniorDealerTerminal: null,

      showDealerDivisionPicker: false,
      dealerDivisionIndex: -1,
      dealerDivision: null,

      showRegionalDirectorPicker: false,
      regionalDirectorIndex: -1,
      regionalDirector: null,

      showSalesServicePicker: false,
      salesServiceIndex: -1,
      salesService: null,

      showAuditStatusPicker: false,
      auditStatusIndex: -1,
      auditStatus: null,

      startTime: null,
      showStartTimePicker: false,

      endTime: null,
      showEndTimePicker: false,

      DealerName: '',
      First_DealerName: '',
      Double_DealerName: '',
      DoorName: '',
      IsKeeding: null,

      Level: null,

      ApplayType: null,

      IsExclusive: 0,
      IsDesignUp: 0,
      IsGoodDoor: 0
    };
  },

  created() {
    this.updateIndex();
  },

  computed: {
    startTimeDefault() {
      return !this.startTime ? this.$u.date(new Date(), 'yyyy-mm-dd') : this.startTime;
    },

    endTimeDefault() {
      return !this.endTime ? this.$u.date(new Date(), 'yyyy-mm-dd') : this.endTime;
    }
  },

  methods: {
    onStartTimeChange(e) {
      this.startTime = `${e.year}-${e.month}-${e.day}`;
    },

    onEndTimeChange(e) {
      this.endTime = `${e.year}-${e.month}-${e.day}`;
    },

    onPickerChange(e, key, listKey) {
      if (!e[0].value || !e[0].label) {
        if (this.metadata[listKey].length > 0) {
          this[key] = {
            label: this.metadata[listKey][0].Value,
            value: this.metadata[listKey][0].Key
          };
        } else {
          return false;
        }
      } else {
        this[key] = e[0];
      }

      this[`${key}Index`] = this.metadata[listKey].findIndex(item => item.Key == this[key].value);
    },

    resetSearch() {
      this.$emit('change', {
        DirectorId: null,
        SalseId: null,
        DealerTerminalId: null,
        TeamId: null,
        SeniorDealerTerminalId: null,
        DealerDivisionId: null,
        SalesService: null,
        RegionalDirector: null,
        DealerName: '',
        StartTime: null,
        EndTime: null,
        ApplayType: null,
        Level: null,
        First_DealerName: '',
        Double_DealerName: '',
        DoorName: '',
        IsKeeding: null,
        AuditState: null,
        IsExclusive: 0,
        IsDesignUp: 0,
        IsGoodDoor: 0
      });

      this.$emit('input', {
        DirectorId: null,
        SalseId: null,
        DealerTerminalId: null,
        TeamId: null,
        SeniorDealerTerminalId: null,
        DealerDivisionId: null,
        SalesService: null,
        RegionalDirector: null,
        DealerName: '',
        StartTime: null,
        EndTime: null,
        ApplayType: null,
        Level: null,
        First_DealerName: '',
        Double_DealerName: '',
        DoorName: '',
        IsKeeding: null,
        AuditState: null,
        IsExclusive: 0,
        IsDesignUp: 0,
        IsGoodDoor: 0
      });

      this.$nextTick(() => {
        this.ApplayType = null;
        this.Level = null;

        this.directorIndex = -1;
        this.director = {};

        this.salseIndex = -1;
        this.salse = {};

        this.dealerTerminalIndex = -1;
        this.dealerTerminal = {};

        this.teamIndex = -1;
        this.team = {};

        this.seniorDealerTerminalIndex = -1;
        this.seniorDealerTerminal = {};

        this.dealerDivisionIndex = -1;
        this.dealerDivision = {};

        this.regionalDirectorIndex = -1;
        this.regionalDirector = {};

        this.salesServiceIndex = -1;
        this.salesService = {};

        this.auditStatusIndex = -1;
        this.auditStatus = {};

        this.startTime = null;

        this.endTime = null;

        this.DealerName = '';
        this.First_DealerName = '';
        this.Double_DealerName = '';
        this.DoorName = '';
        this.IsKeeding = null;
        this.IsExclusive = 0;
        this.IsDesignUp = 0;
        this.IsGoodDoor = 0;
      });
    },

    onSearch() {
      this.$emit('input', {
        DirectorId: this.director && this.director.value,
        SalseId: this.salse && this.salse.value,
        DealerTerminalId: this.dealerTerminal && this.dealerTerminal.value,
        TeamId: this.team && this.team.value,
        SeniorDealerTerminalId: this.seniorDealerTerminal && this.seniorDealerTerminal.value,
        DealerDivisionId: this.dealerDivision && this.dealerDivision.value,
        SalesServiceId: this.salesService && this.salesService.value,
        RegionalDirectorId: this.regionalDirector && this.regionalDirector.value,
        DealerName: this.DealerName,
        StartTime: this.startTime ? parseInt(new Date(this.startTime).getTime() / 1000) : null,
        EndTime: this.endTime ? parseInt(new Date(this.endTime).getTime() / 1000) : null,
        Level: this.Level,
        ApplayType: this.ApplayType,
        First_DealerName: this.First_DealerName,
        Double_DealerName: this.Double_DealerName,
        DoorName: this.DoorName,
        IsKeeding: this.IsKeeding,
        AuditState: this.auditStatus && this.auditStatus.value,
        IsExclusive: this.IsExclusive,
        IsDesignUp: this.IsDesignUp,
        IsGoodDoor: this.IsGoodDoor
      });

      this.$emit('change', {
        DirectorId: this.director && this.director.value,
        SalseId: this.salse && this.salse.value,
        DealerTerminalId: this.dealerTerminal && this.dealerTerminal.value,
        TeamId: this.team && this.team.value,
        SeniorDealerTerminalId: this.seniorDealerTerminal && this.seniorDealerTerminal.value,
        DealerDivisionId: this.dealerDivision && this.dealerDivision.value,
        SalesServiceId: this.salesService && this.salesService.value,
        RegionalDirectorId: this.regionalDirector && this.regionalDirector.value,
        DealerName: this.DealerName,
        StartTime: this.startTime ? parseInt(new Date(this.startTime).getTime() / 1000) : null,
        EndTime: this.endTime ? parseInt(new Date(this.endTime).getTime() / 1000) : null,
        Level: this.Level,
        ApplayType: this.ApplayType,
        First_DealerName: this.First_DealerName,
        Double_DealerName: this.Double_DealerName,
        DoorName: this.DoorName,
        IsKeeding: this.IsKeeding,
        AuditState: this.auditStatus && this.auditStatus.value,
        IsExclusive: this.IsExclusive,
        IsDesignUp: this.IsDesignUp,
        IsGoodDoor: this.IsGoodDoor
      });
    },

    updateIndex() {
      this.directorIndex = this.metadata.DirectorList.findIndex(item => item.Key == this.value.DirectorId);
      const selectedDirector = this.metadata.DirectorList.find(item => item.Key == this.value.DirectorId);
      if (selectedDirector) {
        this.director = {
          value: selectedDirector.Key,
          label: selectedDirector.Value
        };
      }

      this.salseIndex = this.metadata.SalseList.findIndex(item => item.Key == this.value.SalseId);
      const selectedSalse = this.metadata.SalseList.find(item => item.Key == this.value.SalseId);
      if (selectedSalse) {
        this.salse = {
          value: selectedSalse.Key,
          label: selectedSalse.Value
        };
      }

      this.dealerTerminalIndex = this.metadata.DealerTerminalList.findIndex(
        item => item.Key == this.value.DealerTerminalId
      );
      const selectedDealerTerminal = this.metadata.DealerTerminalList.find(
        item => item.Key == this.value.DealerTerminalId
      );
      if (selectedDealerTerminal) {
        this.dealerTerminal = {
          value: selectedDealerTerminal.Key,
          label: selectedDealerTerminal.Value
        };
      }

      this.teamIndex = this.metadata.TeamList.findIndex(item => item.Key == this.value.TeamId);
      const selectedTeam = this.metadata.TeamList.find(item => item.Key == this.value.TeamId);
      if (selectedTeam) {
        this.team = {
          value: selectedTeam.Key,
          label: selectedTeam.Value
        };
      }

      this.seniorDealerTerminalIndex = this.metadata.SeniorDealerTerminalList.findIndex(
        item => item.Key == this.value.SeniorDealerTerminalId
      );
      const selectedSeniorDealerTerminal = this.metadata.SeniorDealerTerminalList.find(
        item => item.Key == this.value.SeniorDealerTerminalId
      );
      if (selectedSeniorDealerTerminal) {
        this.seniorDealerTerminal = {
          value: selectedSeniorDealerTerminal.Key,
          label: selectedSeniorDealerTerminal.Value
        };
      }

      this.dealerDivisionIndex = this.metadata.DealerDivisionList.findIndex(
        item => item.Key == this.value.DealerDivisionId
      );
      const selectedDealerDivision = this.metadata.DealerDivisionList.find(
        item => item.Key == this.value.DealerDivisionId
      );
      if (selectedDealerDivision) {
        this.dealerDivision = {
          value: selectedDealerDivision.Key,
          label: selectedDealerDivision.Value
        };
      }

      this.salesServiceIndex = this.metadata.SalesServiceList.findIndex(item => item.Key == this.value.SalesServiceId);
      const selectedSalesService = this.metadata.SalesServiceList.find(item => item.Key == this.value.SalesServiceId);
      if (selectedSalesService) {
        this.salesService = {
          value: selectedSalesService.Key,
          label: selectedSalesService.Value
        };
      }

      this.regionalDirectorIndex = this.metadata.RegionalDirectorList.findIndex(
        item => item.Key == this.value.RegionalDirectorId
      );
      const selectedRegionalDirector = this.metadata.RegionalDirectorList.find(
        item => item.Key == this.value.RegionalDirectorId
      );
      if (selectedRegionalDirector) {
        this.regionalDirector = {
          value: selectedRegionalDirector.Key,
          label: selectedRegionalDirector.Value
        };
      }

      this.auditStatus = this.metadata.AuditStateBaseList.findIndex(item => item.Key == this.value.AuditState);
      const selecteAuditStatus = this.metadata.AuditStateBaseList.find(item => item.Key == this.value.AuditState);
      if (selecteAuditStatus) {
        this.auditStatus = {
          value: selecteAuditStatus.Key,
          label: selecteAuditStatus.Value
        };
      }

      this.Level = this.value.Level;
      this.ApplayType = this.value.ApplayType;
      this.DealerName = this.value.DealerName;
      this.First_DealerName = this.value.First_DealerName;
      this.Double_DealerName = this.value.Double_DealerName;
      this.DoorName = this.value.DoorName;
      this.IsKeeding = this.value.IsKeeding;
      this.IsExclusive = this.value.IsExclusive;
      this.IsDesignUp = this.value.IsDesignUp;
      this.IsGoodDoor = this.value.IsGoodDoor;
    }
  }
};
</script>

<style lang="scss" scoped></style>
